<template>
	<view class="container">
		<u-row class="user-info" @click="skipDescribe({
						page: 'UserInfo',
						name: '个人信息',
					})">
			<u-avatar style="margin-right: 6px;" size="22" :src="userInfo.avatar ?userInfo.avatar :''"></u-avatar>
			{{userInfo.nickname ?userInfo.nickname :'默认用户名'}}
			<u--image v-if="userInfo.nickname" src="/static/images/my/lj.png" width="20px" height="20px"></u--image>
		</u-row>
		<image style="width: 138px;height: 138px;position: absolute;top:97px;right: 30px;" src="/static/images/my/zh.png"></image>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>{{bindState?userInfo.nickname :'未绑定戒指'}}
					<u--image v-if="bindState" @click="editInfo" style="margin-left: 7px;" src="/static/images/my/bj.png" width="22px" height="22px"></u--image>
				</u-row>
				<template v-if="bindState">
					<u-row class="jkzs-status">
						<u-row>
							<u--image src="/static/images/my/qd.png" width="13px" height="13px"></u--image>
							连接状态
						</u-row>
						<u-row>
							<u--image src="/static/images/my/dl.png" width="13px" height="13px"></u--image>
							当前电量
						</u-row>
					</u-row>
					<u-row class="status-num">
						<span>已连接</span>
						<span> 93 <span>%</span></span>
					</u-row>
				</template>
				<template v-else>
					<u-button class="my-button" plain @click="skipPage('Binding')">
						<u--image src="/static/images/my/ljbd.png" width="13px" height="13px"></u--image>
						立即绑定</u-button>
				</template>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs" style="height: 78px;padding: 0px 10px;">
				<view class="report">
					<u-row>
						<image style="width: 56px;height: 76px;" src="/static/images/my/report.png"></image>
						<view class="report-tip">
							<u-row>健康档案 </u-row>
							<u-row>获取您的健康数据 </u-row>
						</view>
					</u-row>
					<u-button class="my-button" plain @click="skipPage('HealthRecords')">
						<u--image src="/static/images/my/ck.png" width="13px" height="13px"></u--image>
						立即查看</u-button>
				</view>
			</view>
		</view>
		<view class="card" v-for="i in cardList" :key="i.title" @click="skipPage(i.page)">
			<u-row>
				<u-col :span="6">
					<u-row>
						<image style="width: 18px;height: 18px;margin-right: 8px;" :src="i.icon"></image>
						{{ i.title }}
						<span style="font-size: 12px;margin-left: 8px;" v-if="i.title == '检查更新'">V1.0.1</span>
					</u-row>
				</u-col>
				<u-col class="sub-title" textAlign="right" :span="6">
					<u-row justify="flex-end">
						{{ i.subTitle }}
						<view class="sub-title-badge">
							<u-badge v-if="i.title == '检查更新'" :absolute="true" :offset="[0, -4]" :isDot="true" color="#FF2B2C"></u-badge>
							<u-icon style="margin-left: 8px;" size="10" name="arrow-right" color=" #F3D2BA"></u-icon>
						</view>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<!-- 修改弹窗 -->
		<u-modal showCancelButton width="80vw" @confirm="confirmEdit('nickname')" @close="modelShow = false" :show="modelShow" closeOnClickOverlay title="设备名称" cancelColor="#999" confirmColor="#FFD8BB">
			<u--input type="number" style="width: 100%;" placeholder="请输入" border="surround" v-model="inputValue"></u--input>
		</u-modal>
		<tab-bar :tabIndex="4"></tab-bar>
	</view>
</template>
<script>
	import userApi from "@/api/user.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				inputValue: '',
				modelShow: false,
				bindState: true,
				cardList: [{
					title: '成员健康',
					icon: require("../../static/images/homePage/cyjk.png"),
					subTitle: '群组共享健康数据',
					page: 'MemberHealth'
				}, {
					title: '设备设置',
					icon: require("../../static/images/my/sbsz.png"),
					subTitle: '',
					page: 'DevicesSetting'
				}, {
					title: '指围测量',
					icon: require("../../static/images/my/gy.png"),
					subTitle: '',
					page: 'FingerMeasurement'
				}, {
					title: '通用设置',
					icon: require("../../static/images/my/tysz.png"),
					subTitle: ''
				}, {
					title: '常见问题',
					icon: require("../../static/images/my/cjwt.png"),
					subTitle: ''
				}, {
					title: '第三方接入',
					icon: require("../../static/images/my/dsfjr.png"),
					subTitle: ''
				}, {
					title: '关于智能戒指',
					icon: require("../../static/images/my/gy.png"),
					subTitle: ''
				}, {
					title: '问题反馈',
					icon: require("../../static/images/my/wtfk.png"),
					subTitle: ''
				}, {
					title: '检查更新',
					icon: require("../../static/images/my/jcgx.png"),
					subTitle: '发现新版本'
				}],
			}
		},
		components: {},
		onLoad() {
			userApi.getBindRing().then(res => {
				console.log("获取绑定", res)
				// if (res.code == "1051002000") {
				// 	this.bindState = false
				// } else {
				// 	this.bindState = true
				// }
			})
		},
		onReady() {
			uni.hideTabBar()
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		methods: {
			editInfo() {
				this.inputValue = ''
				this.modelShow = true
			},
			confirmEdit(field) {
				let info = this.userInfo ? JSON.parse(JSON.stringify(this.userInfo)) : {}
				info.nickname = this.inputValue
				this.$store.dispatch('user/setUserInfo', info)
				this.modelShow = false
			},
			skipDescribe(pageConfig) {
				uni.navigateTo({
					url: "/pages/PublicPage/PublicPage?pageConfig=" + JSON.stringify(pageConfig)
				})
			},

			skipPage(page) {
				if (!page) return;
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				})
			},

		}
	}
</script>
<style lang="scss">
	.container {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 44px 12px;
		box-sizing: border-box;

		background-image: url("../../static/images/homePage/bg.png");
		background-size: 100% auto;
		background-position: top;
		background-repeat: no-repeat;
		position: relative;


		.user-info {
			margin-bottom: 30px;
			margin-top: 20px;
			position: relative;
			height: 22px;
			font-weight: 800;
			font-size: 16px;
			line-height: 22px;



			::v-deep .u-image {
				position: absolute;
				right: 0px;
				top: 0px
			}
		}

		.card {
			width: 100%;
			background: #1B1B1B;
			border-radius: 12px;
			margin-bottom: 12px;
			padding: 17px;
			box-sizing: border-box;

			.number {
				height: 36px;
				font-size: 30px;
				color: #FFD8BB;
				line-height: 36px;
				padding: 8px 3px;

				span {
					height: 20px;
					font-weight: 600;
					font-size: 14px;
					line-height: 20px;
					margin-left: 2px;
				}
			}

			::v-deep .u-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				justify-content: center;
				background: linear-gradient(180deg, #242820 0%, #171314 100%);
				border: 0px solid;
				border-image: linear-gradient(180deg, rgba(126, 116, 94, 1), rgba(24, 20, 21, 1)) 0 0;
			}

			.sub-title {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				line-height: 17px;
				text-align: left;


				.sub-title-badge {
					position: relative;

					.u-badge {
						width: 6px;
						height: 6px;
					}
				}
			}
		}
	}

	.jkzs-border {
		border-radius: 12px;
		margin-bottom: 12px;
		overflow: hidden;

		.jkzs {
			border: 1px solid;
			border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 13px;
			box-sizing: border-box;
			padding: 16px;
			width: 100%;
			height: 131px;
			background: #0B0F12;
			box-shadow: inset 0px 0px 12px 6px #2C281F;
			font-weight: bold;
			font-size: 24px;

			.report {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.report-tip {
					display: flex;
					flex-direction: column;

				}

				.report-tip .u-row:first-child {
					height: 25px;
					font-weight: bold;
					font-size: 18px;
					line-height: 25px;
				}

				.report-tip .u-row:last-child {
					height: 17px;
					font-size: 12px;
					color: rgba(255, 255, 255, 0.5);
					line-height: 17px;
					margin-top: 6px;
					font-weight: normal;
				}


			}

			.my-button {
				width: 94px;
				margin: 0;
				background-color: transparent;
				height: 32px;
				border-radius: 6px;
				border: 1px solid #FFD8BB;
				font-weight: 500;
				font-size: 12px;
				color: #FFD8BB;

				::v-deep .u-image {
					margin-right: 5px;
				}
			}

			.jkzs-status {
				font-size: 12px;

				.u-icon {
					margin-right: 3px;
				}

				::v-deep .u-image {
					margin-right: 3px;
				}
			}


			.jkzs-status .u-row:first-child {
				margin-right: 37px;
				color: #FFD8BB;
			}

			.jkzs-status .u-row:last-child {
				color: #54D7A5;
			}

			.status-num span:first-child {
				color: #FFD8BB;
				font-size: 18px;
				width: 66px;
				margin-right: 37px;
			}

			.status-num span:last-child {
				color: #54D7A5;
				font-size: 24px;

				span {
					font-size: 8px;
				}
			}
		}
	}
</style>